<script setup lang="ts">
import { reactive, watch } from "vue"
import { ElDatePicker, ElForm, ElFormItem, ElInputNumber, ElInput, ElSwitch, ElSelectV2, ElButton } from "element-plus"
import { useDebounceFn } from "@vueuse/core"
import { merge, get,set } from "lodash-es"

const props = defineProps<{ uuid?: string, id?: string, modelValue?: any }>()
const { uuid = undefined, id = undefined, modelValue = {} } = props;
const emits = defineEmits<{ "change": [val: any],init:[val:any] }>()

const showTime = id == null && uuid == null;

const dt = new Date();
const dy = dt.getFullYear();
const dm = `0${dt.getMonth() + 1}`.replace(/.(?=\d{2})/, '');
const dd = dt.getDate();
const dv = {
    maxResults: 1000,
    incrementalResults: false,
    summarize: true,
    startDate: showTime ? `${dy}-${dm}-${dd} 00:00:00` : undefined,
    endDate: showTime ? `${dy}-${dm}-${dd} 23:59:59` : undefined,
    maximumFileSize: undefined,
    maximumUnit: "GB",
    minimumUnit: 'KB',
    minimumFileSize: undefined,
    searchTerms: {
        EventType: { value: undefined, inverse: false },
        Filename: { value: undefined, inverse: false },
        FlowFileUUID: { value: uuid, inverse: false },
        ProcessorID: { value: id, inverse: false },
        Relationship: { value: undefined, inverse: false }
    }
}

const model = reactive<typeof dv>(merge({}, dv, modelValue))

//
// if (id || uuid) {
//     // @ts-ignore
//     model.startDate = null;
//     // @ts-ignore
//     model.endDate = null;
// }

const FileSizeUnitOptions = [
    { label: 'KB', value: "KB" },
    { label: 'MB', value: "MB" },
    { label: 'GB', value: "GB" },
]

const transModel = (v: typeof dv = model) => {
    const res: any = {}
    for (const k of Object.keys(v)) {
        const val = get(v, k)
        if (v == null) continue;
        if (k == 'searchTerms') {
            res.searchTerms = {}
            Object.keys(val).filter(t => val[t].value != null).forEach(t => {
                set(res.searchTerms,[t,'value'],val[t].value)
                set(res.searchTerms,[t,'inverse'],val[t].inverse)
            })
        } else {
            res[k] = val;
        }
    }
    if(v.maximumFileSize == null){
        delete res.maximumUnit
    }
    if(v.minimumFileSize == null){
        delete res.minimumUnit
    }
    return res;
}

const handleClear = () => {
    model.summarize = dv.summarize;
    model.startDate = dv.startDate;
    model.endDate = dv.endDate;
    model.maxResults = dv.maxResults;
    model.maximumFileSize = dv.maximumFileSize;
    model.minimumUnit = dv.minimumUnit;
    model.minimumFileSize = dv.minimumFileSize;
    model.minimumUnit = dv.minimumUnit;
    Object.assign(model.searchTerms.EventType,dv.searchTerms.EventType)
    Object.assign(model.searchTerms.Filename,dv.searchTerms.Filename)
    Object.assign(model.searchTerms.FlowFileUUID,dv.searchTerms.FlowFileUUID)
    Object.assign(model.searchTerms.ProcessorID,dv.searchTerms.ProcessorID)
    Object.assign(model.searchTerms.Relationship,dv.searchTerms.Relationship)
}
//
// emits('update:modelValue', transModel())
emits('init', transModel())

watch(model, useDebounceFn((v) => {
    const d = transModel(v)
    emits('change', d)
},500))



</script>


<template>
    <div class="w-fit max-h-40vh overflow-x-hidden overflow-y-auto scrollbar-thin p-8px">
        <ElForm class="no-check" :model="model" size="small">
            <div class="flex items-baseline justify-between mb-4px">
                <ElFormItem prop="maxResults" label="查询记录最大数量">
                    <ElInputNumber v-model="model.maxResults" :min="10" title="查询记录最大数量"></ElInputNumber>
                </ElFormItem>
                <ElButton type="warning" plain @click.stop="handleClear">
                    <div class="i-material-symbols:delete-outline w-1em h-1em"></div>清空
                </ElButton>
            </div>
            <fieldset class="flex items-center gap-1em">
                <legend>时间范围</legend>
                <ElFormItem prop="startDate" label="开始时间" class="el-form-item--label-top">
                    <ElDatePicker v-model="model.startDate" type="datetime" :unlink-panels="true" :teleported="false"
                        value-format="YYYY-MM-DD HH:mm:ss"></ElDatePicker>
                </ElFormItem>
                <ElFormItem prop="endDate" label="结束时间" class="el-form-item--label-top">
                    <ElDatePicker v-model="model.endDate" type="datetime" :unlink-panels="true" :teleported="false"
                        value-format="YYYY-MM-DD HH:mm:ss"></ElDatePicker>
                </ElFormItem>
            </fieldset>

            <fieldset>
                <legend>searchTerms</legend>

                <div class="flex items-center justify-between gap-1em">
                    <ElFormItem prop="searchTerms.EventType.value" label="事件类型" class="flex-1 el-form-item--label-left"
                        label-width="100">
                        <ElInput v-model="model.searchTerms.EventType.value" placeholder="事件类型 Event Type"></ElInput>
                    </ElFormItem>
                    <ElFormItem prop="searchTerms.EventType.inverse" label="">
                        <ElSwitch v-model="model.searchTerms.EventType.inverse" inline-prompt active-text="排除"
                            inactive-text="包含" title="是否从搜索结果中排除该值"></ElSwitch>
                    </ElFormItem>
                </div>
                <div class="flex items-center justify-between gap-1em mt-4px">
                    <ElFormItem prop="searchTerms.Filename.value" label="文件名称" class="flex-1 el-form-item--label-left"
                        label-width="100">
                        <ElInput v-model="model.searchTerms.FlowFileUUID.value" :disabled="uuid != null"
                            placeholder="文件名称 Filename"></ElInput>
                    </ElFormItem>
                    <ElFormItem prop="searchTerms.Filename.inverse" label="">
                        <ElSwitch v-model="model.searchTerms.FlowFileUUID.inverse" :disabled="uuid != null"
                            inline-prompt active-text="排除" inactive-text="包含" title="是否从搜索结果中排除该值"></ElSwitch>
                    </ElFormItem>
                </div>
                <div class="flex items-center justify-between gap-1em mt-4px">
                    <ElFormItem prop="searchTerms.Filename.value" label="关系" class="flex-1 el-form-item--label-left"
                        label-width="100">
                        <ElInput v-model="model.searchTerms.Relationship.value" placeholder="关系 Relationship"></ElInput>
                    </ElFormItem>
                    <ElFormItem prop="searchTerms.Filename.inverse" label="">
                        <ElSwitch v-model="model.searchTerms.Relationship.inverse" inline-prompt active-text="排除"
                            inactive-text="包含" title="是否从搜索结果中排除该值"></ElSwitch>
                    </ElFormItem>
                </div>
                <div class="flex items-center justify-between gap-1em mt-4px">
                    <ElFormItem prop="searchTerms.Filename.value" label="算子 ID" class="flex-1 el-form-item--label-left"
                        label-width="100">
                        <ElInput v-model="model.searchTerms.ProcessorID.value" :disabled="id != null"
                            placeholder="算子 ID ProcessorID"></ElInput>
                    </ElFormItem>
                    <ElFormItem prop="searchTerms.Filename.inverse" label="">
                        <ElSwitch v-model="model.searchTerms.ProcessorID.inverse" :disabled="id != null" inline-prompt
                            active-text="排除" inactive-text="包含" title="是否从搜索结果中排除该值"></ElSwitch>
                    </ElFormItem>
                </div>

            </fieldset>
            <fieldset>
                <legend>文件大小</legend>
                <div class="flex items-center gap-1em">
                    <ElFormItem prop="minimumFileSize" label="最小文件大小" class="el-form-item--label-top">
                        <ElInput v-model="model.minimumFileSize" size="small"
                            :formatter="(v: string) => v ? Number(v) || 0 : null" placeholder="最小文件大小">
                            <template #append>
                                <ElSelectV2 v-model="model.minimumUnit" size="small" style="width:80px;"
                                    :options="FileSizeUnitOptions" :teleported="false"></ElSelectV2>
                            </template>
                        </ElInput>
                    </ElFormItem>
                    <ElFormItem prop="maximumFileSize" label="最大文件大小" class="el-form-item--label-top">
                        <ElInput v-model="model.maximumFileSize" size="small"
                            :formatter="(v: string) => v ? Number(v) || 0 : null" placeholder="最大文件大小"><template
                                #append>
                                <ElSelectV2 v-model="model.maximumUnit" size="small" style="width:80px;"
                                    :options="FileSizeUnitOptions" :teleported="false"></ElSelectV2>
                            </template>
                        </ElInput>
                    </ElFormItem>

                </div>
            </fieldset>

        </ElForm>
    </div>
</template>

<style>
.el-form.no-check {
    .el-form-item {
        margin-bottom: 0;

    }

    .el-form-item--label-top .el-form-item__label {
        margin-bottom: 0;
    }
}
</style>